<template>
    <div>
         <div class="box">
               <table cellspacing="0" border="1px" style="width:500px; height: 400px;">
                <thead>
                 <tr>
                    <td><input type="checkbox" v-model="checkall"></td>
                    <td>商品名称</td>
                    <td>商品图片</td>
                    <td>商品单价</td>
                    <td>商品数量</td>
                    <td>商品总价</td>
                    <td>操作</td>
                 </tr>
                </thead>
                <tbody v-for="item,index in list[0]" :key="index">
                 <tr>
                      <td><input type="checkbox" v-model="item.checkbox"></td>
                      <td>{{item.name}}</td>
                      <td><img :src="item.img" alt="" width="60px"></td>
                      <td>{{item.price }}</td>
                      <td>
                        <button @click="jian(item)">-</button>
                        {{  item.num}}
                        <button @click="jia(item)">+</button>
                      </td>
                      <td>{{  item.zongjia}}</td>
                      <td><button @click="del(index)">删除</button></td>
                 </tr>
                </tbody>
                <tr>
                    <td>总计</td>
                    <td>总价{{  zj}} </td>
                    <td>总数量{{ zs}}</td>
                </tr>
               </table>
         </div>
    </div>
</template>

<script>
import obj from '../../../public/items.json'
export default {
    name: 'MyIndex',

    data() {
        return {
            list:[]
        };
    },

    mounted() {
        
    },
    created(){
       this.getlist()
    },

    methods: {
        getlist(){
            this.list.push(Object(obj))
            console.log(this.list);
        },
        jian(item){
           if(item.num!=0){
               item.num--
               item.zongjia=item.price*item.num
           }
        },
        jia(item){
           if(item.num>=0){
               item.num++
               item.zongjia=item.price*item.num
           }
        },
        del(index){
          this.list[0].splice(index,1)
        }
    },
    computed:{
       checkall:{
          get(){
            return this.list[0].every(item=>item.checkbox)
          },
        //   全选
          set(val){
             this.list[0].forEach(item=>item.checkbox=val)
          }
       },
       zj(){
        return this.list[0].reduce((sum,item)=>sum+=item.zongjia,0)
       },
       zs(){
        return this.list[0].reduce((sum,item)=>sum+=item.num,0)
       }
    }
};
</script>

<style lang="scss" scoped>

</style>